<template>
  <el-space direction="vertical">
    <h1>详情</h1>

    <el-form label-width="100">
      <el-form-item label="标题">
        <el-input :model-value="model?.title" placeholder="请输入标题" disabled />
      </el-form-item>

      <el-form-item label="正文">
        <!-- <el-input
          :model-value="model?.content"
          :rows="5"
          type="textarea"
          placeholder="请输入正文"
          disabled
        /> -->

        <WangEditor :model-value="model?.content" disabled />
      </el-form-item>
    </el-form>
  </el-space>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { watchEffect, ref } from 'vue'
import { useRoute } from 'vue-router'
import WangEditor from '@/components/wang-editor.vue'

const route = useRoute()
const model = ref<NewItem | null>(null)

watchEffect(() => {
  axios.get<NewItem>(`http://127.0.0.1:3000/news/${route.params.id}`).then(({ data }) => {
    console.log('=== data', data)

    model.value = data
  })
})
</script>
